import React, {ReactComponentElement, ReactElement} from "react";
import './index.css'
import {NavLink} from "react-router-dom";
import {MenuItemType, MenuPropType, StateType} from './DataType'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined
} from "@ant-design/icons";
import MenuItem from "@/components/menu/MenuItem";
class Menu extends React.Component<MenuPropType, StateType> {
    state = {
        collapsed: false,
        width: "",
        height: "",
        direction: "column",
        MenuStyle: {
            width: ""
        }
    }
    static defaultProps = {
        collapsed: false,
        vertical: true
    }

    constructor(props: MenuPropType) {
        super(props);
    }

    reRender = () => {
        if (this.props.vertical) {
            this.setState({direction: "column", height: "100%"})
            if (this.state.collapsed)
                this.setState({width: "60px"})
            else
                this.setState({width: "200px"})
        } else {
            this.setState({direction: "row", width: "100%", height: "60px"})
        }
    }

    componentDidMount() {
        this.reRender()
    }

    handleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed
        })
        setTimeout(()=>{
            this.reRender()
        },100)
    }

    render() {
        let MenuStyle = {
            width: this.state.width,
            height: this.state.height
        }
        return (
            <>
                <div className={'menu'}
                     style={{
                         width: this.state.width,
                         height: this.state.height
                     }}
                >
                    {
                        this.props.collapsed ?
                            <>
                                <div className={'menu-item'} onClick={this.handleCollapsed}
                                     style={{width: this.state.width}}
                                >
                                <span className={'icon'}>
                                    {
                                        this.state.collapsed ?
                                             <MenuUnfoldOutlined/>:<MenuFoldOutlined/>
                                    }
                                </span>
                                </div>
                            </>:<></>

                    }
                    {
                        this.props.MenuItems.map((item: MenuItemType) => {
                            return (
                                <MenuItem MenuItem={item} collapsed={this.state.collapsed} key={item.path}/>
                            )
                        })
                    }
                </div>
            </>
        );
    }

}

export default Menu;